<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/artDialog/skins/simple-star.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/star/css/buttons.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/jquery-zTree/css/style.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/jquery-zTree/css/zTreeStyle/zTreeStyle.css}" />
<style type="text/css">
.btnGroup {
  margin-bottom: 12px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
</head>
<body>
  <div class="edit-container">
    <div style="height: 350px; overflow-y: scroll;">
      <div class="zTreeDemoBackground left">
        <ul id="areaTree" class="ztree" style="width:95%;height:100%"></ul>
      </div>
    </div>
    <div class="btnGroup">
      <input type="button" value="确定" class="button blue" id="enterBtn">
      <input type="button" value="关闭" class="button grey" onclick="art.dialog.close();">
    </div>
  </div>
  <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/jquery-zTree/jquery.ztree.core.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/jquery.artDialog.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/iframeTools.source.js}"></script>
  <script type="text/javascript" th:inline="javascript">
    var setting = {
      async: {
        enable: true,
        url:"/area/getAreasByParentId",
        autoParam:["id=parentId"],
        dataFilter: filter
      },
      view: {
        selectedMulti: false
      },
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {
        beforeDrag: false,
        onNodeCreated: function(event, treeId, treeNode){
          //if(treeNode.id==1){
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            zTree.reAsyncChildNodes(treeNode, "refresh", true);
          //}
        },
      }
    };
    function filter(treeId, parentNode, childNodes) {
      if (childNodes.length==0){
        parentNode.isParent=false;
        return null;
      }
      var nodes = new Array();
      for (var i=0, l=childNodes.length; i<l; i++) {
        var isParent = childNodes[i].children.length > 0;
        var iconSkin = null == parentNode ? 'pIcon01' : isParent ? 'pIcon02' : 'icon03';
        nodes[i] = {'id':childNodes[i].areaId, 'pId':childNodes[i].parentId, 'name': childNodes[i].areaName, 'isParent': isParent, 'open': isParent};
      }
      return nodes;
    }
    var opts = artDialog.data("opts");
    $(function() {
      $.fn.zTree.init($("#areaTree"), setting);
      if (opts && opts.areaId) {
        $("li[data-id=" + opts.areaId + "]").addClass("on");
        var clone = $("li.on").parents("div.item").remove();
        $("div.item:first").before(clone);
      }
      $("#enterBtn").click(function(){
        var zTree = $.fn.zTree.getZTreeObj("areaTree");
        var nodes = zTree.getSelectedNodes();
        if(nodes.length==0){
          artDialog.alert("请选择地区");
          return;
        }
        var node = nodes[0];
        var ns = node.getPath();
        var areas = {};
        var names=["province","city","area","town"];
        for(var o in ns){
          var a = ns[o];
          areas[names[o]+"Id"] = a.id;
          areas[names[o]+"Name"] = a.name;
        }
        if (opts) {
          opts.callback(areas);
          art.dialog.close();
        }
      });
    });
  </script>
</body>
</html>